<template>
    <bi-tab>
        <bi-form label-width="90" >
            <bi-tab-item label="商品">
                <select-goods v-model="form.goods"></select-goods>
            </bi-tab-item>
            <bi-tab-item label="显示">
                <bi-form-item label="行间距" >
                    <input-size v-model="form.rowGap" ></input-size>
                </bi-form-item>
                <bi-form-item label="详情" >
                    <bi-checkbox v-model="form.detail" :option="goodsDetailOption"></bi-checkbox>
                </bi-form-item>
                <goods-style v-model="form.goodsStyle"></goods-style>
                
            </bi-tab-item>
            <bi-tab-item label="图片">
                <bi-form-item label="图片类型" >
                    <bi-radio v-model="form.pictureType" :option="pictureTypeOption"></bi-radio>
                </bi-form-item>
                <bi-form-item label="图片高度" v-if="form.pictureType=='custom'" >
                    <input-size v-model="form.pictureHeight" ></input-size>
                </bi-form-item>
                <bi-form-item label="图片圆角" >
                    <input-size v-model="form.pictureRadius" ></input-size>
                </bi-form-item>
                <bi-form-item label="图片模式" >
                    <image-mode v-model="form.pictureMode"></image-mode>
                </bi-form-item>
            </bi-tab-item>
        </bi-form>
    </bi-tab>
</template>

<script>
import editorMixin from '../../editorMixin.js';
import selectGoods from '../../field/select-goods.vue';
import inputSize from '../../field/input-size.vue';
import defaultConfig from './defaultConfig.js';
import imageMode from '../../field/image-mode.vue';
import goodsStyle from '../../field/goods-style.vue';
export default{
    mixins:[editorMixin],
    components:{
        selectGoods,
        inputSize,
        imageMode,
        goodsStyle
    },
    data(){
        //let form = JSON.parse(JSON.stringify(defaultConfig));
        let form = defaultConfig;
        let pictureTypeOption = [
            {label:"正方形",value:'square'},
            {label:'自适应',value:'fill'},
            {label:'自定义',value:'custom'}
        ]
        
        let goodsDetailOption = [
            {label:'标题',value:'title'},
            {label:'价格',value:'price'},
            {label:'原价',value:'originalPrice'},
            {label:'销量',value:'sales'},
            {label:'库存',value:'stock'},
            {label:'品牌',value:'band'},
            {label:'标签',value:'tag'},
            {label:'分类',value:'category'},
            {label:'加入购物车',value:'btn'},
        ]
        

        if (this.rowType=='row-2' || this.rowType=='row-3') form.rowNumber = 1;
        else form.rowNumber = 3;

        return {
            form,
            pictureTypeOption,
            goodsDetailOption
        }
    }
}
</script>